<!-- 企业管理 -->
<template>
  <div class="memberClass">
    <div class="backgroundClass">
      <div class="list_title_name">
        <span>{{ title_name }}</span>
      </div>
      <div class="filter-container memberServe">
        <div class="memberServe-item2">
          <el-button class="filter-item" type="primary" @click="search"
            >刷新</el-button
          >
          <el-select v-model="questionType" placeholder="请选择题型">
            <el-option
              v-for="item in questionTypeList"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="errorType" placeholder="请选择问题类型">
            <el-option
              v-for="item in errorTypeList"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="state" placeholder="请选择问题类型">
            <el-option
              v-for="item in states"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <el-table
        :header-cell-style="{ background: '#FAFAFA' }"
        v-loading="loading"
        :data="data"
      >
        <el-table-column property="qtype" label="题型" min-width="100" />
        <el-table-column property="category" label="问题类型" min-width="100" />

        <el-table-column label="问题描述" property="reason">
          <template slot-scope="{ row }">
            <el-tooltip
              popper-class="istip"
              :content="row.reason"
              raw-content
              placement="top-start"
              v-if="row.reason"
            >
              <span v-if="row.reason && row.reason.length <= 15">
                {{ row.reason }}
              </span>
              <span v-if="row.reason && row.reason.length > 15">
                {{ row.reason.substr(0, 15) + "..." }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column property="mark" label="状态" min-width="100">
          <template slot-scope="{ row }">
            <p
              :style="
                row.mark == '待处理'
                  ? { color: '#FA6400' }
                  : { color: '#7BD01D' }
              "
            >
              {{ row.mark }}
            </p>
          </template>
        </el-table-column>
        <el-table-column property="create_time" label="时间" min-width="100" />

        <el-table-column label="操作" property="reason">
          <template slot-scope="{ row }">
            <el-button
              style="padding-left: 0"
              type="text"
              @click="checkItem(row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="count"
        :page.sync="page"
        :limit.sync="limit"
        @pagination="search"
      />
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { feedbackList } from "@/api/admin.js";
export default {
  components: { Pagination },
  data() {
    return {
      questionType: "",
      errorType: "",
      state: "",

      questionTypeList: [
        { text: "全部", value: "" },
        { text: "单选题", value: "单选" },
        { text: "判断题", value: "判断" },
        { text: "多选题", value: "多选" },
      ],
      errorTypeList: [
        { text: "全部", value: "" },
        { text: "题干缺失", value: "题干缺失" },
        { text: "答案错误", value: "答案错误" },
        { text: "用户体验", value: "用户体验" },
        { text: "其他", value: "其他" },
      ],
      states: [
        { text: "全部", value: "" },
        { text: "已处理", value: "已处理" },
        { text: "未处理", value: "未处理" },
      ],
      title_name: this.$route ? this.$route.meta.title : "",
      label: "",
      data: [],
      loading: false,
      modalloading: false,
      // 添加、修改
      visible: false, //显示隐藏
      form: {
        label: "",
        subdomain: "",
        domain: "",
        db: "",
        selected_gz: "",
        district: [],
        region_id: 37,
      },
      count: 0,
      limit: 10,
      page: 1,
      options: [],
      gz: [], //工种列表
      gzList: [], //工种选中列表
      isYes: 1, //点击按钮
      isShow: true,
    };
  },
  watch: {
    questionType() {
      this.search();
    },
    errorType() {
      this.search();
    },
    state() {
      this.search();
    },
  },
  methods: {
    checkItem(item) {
      this.$router.push({
        name: "feedbackDetail",
        params: {
          all: item,
        },
      });
    },
    seccClick(row) {
      this.$confirm(row.content ? row.content : "暂无留言信息", "查看留言", {
        confirmButtonText: "关闭",
        showCancelButton: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
      })
        .then(() => {})
        .catch(() => {});
    },
    search() {
      this.loading = true;
      feedbackList({
        qtype: this.questionType,
        category: this.errorType,
        mark: this.state,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.data = res.data.list;
          this.count = res.data.count;
        }
      });
    },
  },
  created() {
    this.search();
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/calculation.scss";
::v-deep {
  .memberServe-item2 {
    .el-select {
      margin-left: 20px;
    }
  }
  .el-dialog__body {
    padding: 0 !important;
    padding-top: 10px !important;
  }
  .el-cascader__tags {
    // height:72% !important;
    // overflow: auto !important;
  }
  .ModelBox {
    padding: 20px 36px;
    width: 100%;
    border-top: #eee solid 1px;
    .el-select__tags {
      height: 72% !important;
      overflow: auto !important;
    }
    .el-select {
      width: 100% !important;
      min-height: auto !important;
    }
    .el-input {
      width: 100% !important;
      input {
        width: 100% !important;
      }
    }
    .el-cascader {
      width: 100% !important;
    }
  }
  .gzselect {
    // min-height:100px !important;
    .el-input {
      min-height: 100px !important;
      input {
        height: 100px !important;
      }
    }
  }
}
.backgroundClass {
  padding: 24px;
  background: #fff;
  width: 100%;
  .list_title_name {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #edeef0;
    span {
      font-size: 20px;
      font-weight: 500;
    }
  }
}
</style>

<style lang="scss">
.istip {
  width: 300px !important;
}
</style>
